<template>
    <div class="right-main">
        <div class="content">
            <div class="title">
                <div class="title-label">页面设置</div>
            </div>
            <div class="title-item">
                <div class="title-item-text">
                    轮播图<span class="desc">（图片支持JPG、PNG、JPEG格式，大小10M以内，建议尺寸828px*464px）</span>
                </div>
            </div>
            <div class="banner-box">
                <div v-for="(item, index) in props.bannerList" :key="index" class="banner-item">
                    <div class="box-img">
                        <img class="box-img-item" :src="item.url" alt="" />
                        <span class="box-img-hover">
                            <img
                                class="del-img"
                                src="@/assets/channelConfig/marketingApplet/del.png"
                                @click="delItemImg(1, index)" />
                        </span>
                    </div>
                </div>
                <div class="banner-item">
                    <el-upload
                        v-if="props.bannerList.length < 5"
                        action=""
                        accept=".jpg,.JPG,.jpeg,.JPEG,.png,.PNG"
                        :show-file-list="false"
                        :disabled="props.bannerList.length >= 5"
                        :before-upload="onBeforeUpload"
                        :http-request="onHttpRequest">
                        <div class="upload-box">
                            <div>
                                <div class="icon">
                                    <el-icon>
                                        <Plus />
                                    </el-icon>
                                </div>
                                <div class="text">({{ props.bannerList.length }}/5)</div>
                            </div>
                        </div>
                    </el-upload>
                </div>
            </div>
            <div class="title-item">
                <div class="title-item-text">导航区</div>
            </div>
            <div class="category-box">
                <el-form ref="refForm" :model="categoryForm">
                    <el-form-item label="导航个数">
                        <el-radio-group v-model="categoryForm.num" @change="changeNum">
                            <el-radio :label="1">1个</el-radio>
                            <el-radio :label="2">2个</el-radio>
                            <el-radio :label="3">3个</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <div v-for="(item, index) in categoryForm.component" :key="index" class="category-square">
                        <div class="category-header">导航{{ index + 1 }}</div>
                        <div class="category-body">
                            <el-form-item label="导航名称">
                                <el-input v-model="item.name" show-word-limit maxlength="6" />
                            </el-form-item>
                            <el-form-item
                                label="导航图片"
                                :prop="`component[${index}].img`"
                                :rules="{ required: true, message: '请上传导航图片', trigger: 'change' }">
                                <el-upload
                                    v-if="!item.img"
                                    action=""
                                    accept=".jpg,.JPG,.jpeg,.JPEG,.png,.PNG"
                                    :show-file-list="false"
                                    :before-upload="onBeforeUpload"
                                    :http-request="file => onHttpRequest3(file, index)">
                                    <div class="category-upload">
                                        <img class="icon" src="@/assets/channelConfig/marketingApplet/addUpload.png" />
                                    </div>
                                </el-upload>
                                <div v-else class="box-img">
                                    <img class="box-img-item" :src="item.img" alt="" />
                                    <span class="box-img-hover">
                                        <img
                                            class="del-img"
                                            src="@/assets/channelConfig/marketingApplet/del.png"
                                            @click="categoryForm.component[index].img = ''" />
                                    </span>
                                </div>
                            </el-form-item>

                            <el-form-item
                                label="交互类型"
                                :prop="`component[${index}].page_type`"
                                :rules="{ required: true, message: '请选择交互类型', trigger: 'change' }">
                                <el-select
                                    v-model="item.page_type"
                                    placeholder="请选择"
                                    class="form-label"
                                    @change="changeType($event, index)">
                                    <el-option :key="1" label="内部微页面" :value="1"></el-option>
                                    <el-option :key="2" label="其他小程序" :value="2"></el-option>
                                    <el-option :key="3" label="不跳转" :value="3"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item
                                v-if="item.page_type == 1"
                                label="跳转页面"
                                :prop="`component[${index}].redirect_type`"
                                :rules="{
                                    required: item.page_type == 1,
                                    message: '请选择交互类型',
                                    trigger: 'change'
                                }">
                                <el-select
                                    v-model="item.redirect_type"
                                    placeholder="请选择"
                                    class="form-label"
                                    @change="changePage($event, index)">
                                    <el-option :key="1" label="店铺订单转换页" :value="1"></el-option>
                                    <el-option :key="2" label="抖音达人订单转换页" :value="2"></el-option>
                                    <el-option :key="3" label="快手达人订单转换页" :value="3"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item
                                v-if="item.page_type == 2"
                                label="跳转页面"
                                :prop="`component[${index}].appid`"
                                :rules="{
                                    required: item.page_type == 2,
                                    trigger: 'blur',
                                    validator: validatorAppid(index)
                                }">
                                <el-input v-model="item.appid" placeholder="请输入小程序AppID" />
                                <el-input
                                    v-model="item.url"
                                    placeholder="请输入小程序页面地址"
                                    class="category-input" />
                                <div class="category-tips">
                                    请确保小程序页面路径可访问，例如：/pages/home/index?pageld=1001
                                </div>
                            </el-form-item>
                        </div>
                    </div>
                </el-form>
            </div>
            <div class="title-item">
                <div class="title-item-text">
                    海报位<span class="desc">（图片支持JPG、PNG、JPEG格式，大小10M以内）</span>
                </div>
            </div>
            <div class="poster-box">
                <div v-for="(item, index) in props.posterList" :key="index" class="banner-item">
                    <div class="box-img">
                        <img class="box-img-item" :src="item.url" alt="" />
                        <span class="box-img-hover">
                            <img
                                class="del-img"
                                src="@/assets/channelConfig/marketingApplet/del.png"
                                @click="delItemImg(2, index)" />
                        </span>
                    </div>
                </div>
                <el-upload
                    v-if="props.posterList.length < 8"
                    action=""
                    accept=".jpg,.JPG,.jpeg,.JPEG,.png,.PNG"
                    :show-file-list="false"
                    :disabled="props.posterList.length >= 8"
                    :before-upload="onBeforeUpload"
                    :http-request="onHttpRequest2">
                    <div class="upload-box">
                        <div>
                            <div class="icon">
                                <el-icon>
                                    <Plus />
                                </el-icon>
                            </div>
                            <div class="text">({{ props.posterList.length }}/8)</div>
                        </div>
                    </div>
                </el-upload>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { reactive, watch, ref } from 'vue';
import { ElMessage, ElForm } from 'element-plus';
import { uploadFile2 } from '@/api/common';
import lodash from 'lodash';

const emit = defineEmits(['delImgs', 'changeForm', 'submit']);
const categoryForm = reactive({
    num: 1,
    component: [
        {
            name: '',
            img: '',
            page_type: '',
            redirect_type: '',
            appid: '',
            url: ''
        }
    ]
});

const refForm = ref();
const props = defineProps({
    bannerList: {
        type: Array,
        default: () => {
            return [];
        }
    },
    posterList: {
        type: Array,
        default: () => {
            return [];
        }
    },
    navigationData: {
        type: Object,
        default: () => {
            return {};
        }
    }
});

const delItemImg = (type: any, index: any) => {
    emit('delImgs', type, index);
};

const onBeforeUpload = (file: any) => {
    const acceptImg = ['image/png', 'image/jpg', 'image/jpeg'];
    const is2M = file.size / 1024 / 1024 <= 10;
    if (!is2M) {
        ElMessage.warning(`上传的图片最大支持10M`);
        return false;
    }
    if (!acceptImg.includes(file.type)) {
        ElMessage.error('图片格式不正确！');
        return false;
    }
    return true;
};

const onHttpRequest = async ({ file }: any) => {
    const params = {
        file: file,
        fileName: file.name
    };
    const res: any = await uploadFile2(params);
    emit('submit', 1, res);
};

const onHttpRequest2 = async ({ file }: any) => {
    const params = {
        file: file,
        fileName: file.name
    };
    const res: any = await uploadFile2(params);
    emit('submit', 2, res);
};
const onHttpRequest3 = async ({ file }: any, index: any) => {
    const params = {
        file: file,
        fileName: file.name
    };
    const res: any = await uploadFile2(params);
    categoryForm.component[index].img = res.url;
    refForm.value.validate();
};
const changePage = (val: any, index: any) => {
    const urlList = [
        '',
        '/pages-order/orderconversion/index',
        '/pages-order/wiseManOrderConversion/dyindex',
        '/pages-order/wiseManOrderConversion/ksindex'
    ];
    categoryForm.component[index].url = urlList[val];
};
const changeType = (val: any, index: any) => {
    categoryForm.component[index].url = '';
    categoryForm.component[index].appid = '';
};
const changeNum = (val: any) => {
    const num = val - categoryForm.component.length;
    if (num > 0) {
        categoryForm.component.push(
            ...Array.from({ length: num }, () => {
                return {
                    name: '',
                    img: '',
                    page_type: '',
                    redirect_type: '',
                    appid: '',
                    url: ''
                };
            })
        );
    } else {
        categoryForm.component.splice(val, Math.abs(num));
    }
};
const validate = async () => {
    return new Promise(resolve => {
        refForm.value?.validate((valid: any) => {
            resolve(valid);
        });
    });
};
const validatorAppid = index => {
    return (rule, value, callback) => {
        if (!categoryForm.component[index].appid && !categoryForm.component[index].url) {
            return callback(new Error('请填写小程序AppID和页面地址'));
        }
        if (!categoryForm.component[index].appid) {
            return callback(new Error('请填写小程序AppID'));
        }
        if (!categoryForm.component[index].url) {
            return callback(new Error('请填写小程序页面地址'));
        }
        callback();
    };
};
defineExpose({
    validate
});
watch(
    () => categoryForm,
    val => {
        emit('changeForm', val);
    },
    { deep: true }
);
watch(
    () => props.navigationData,
    val => {
        Object.assign(categoryForm, val);
    },
    { deep: true }
);
</script>
<style lang="scss" scoped>
.right-main {
    width: 600px;
    background: #fff;

    .content {
        padding: 24px;
        min-height: 660px;
        background: #fff;
        box-shadow: -2px 0 14px 0 rgb(0 0 0 / 10%);
    }

    .title-item {
        display: flex;
        align-items: center;
        padding-top: 24px;

        &::before {
            display: inline-block;
            width: 4px;
            height: 14px;
            content: '';
            background: #ff6b00;
        }

        .title-item-text {
            margin-left: 6px;
            color: #33302d;
            font-size: 14px;

            .desc {
                padding-left: 8px;
                font-size: 12px;
                color: rgb(154 154 154);
            }
        }
    }

    .banner-box {
        padding-top: 16px;
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .category-box {
        .category-input {
            margin-top: 8px;
        }

        .category-tips {
            margin-top: 8px;
            font-size: 14px;
            font-family: PingFangSC-Regular, 'PingFang SC';
            font-weight: 400;
            color: #969696;
            line-height: 14px;
        }

        .el-form {
            padding-top: 9px;
        }

        :deep(.el-form-item__label) {
            font-size: 14px;
        }

        .category-square {
            background: #fff;
            border-radius: 4px;
            border: 1px solid #eaeaea;
            margin-bottom: 16px;

            &:last-child {
                margin-bottom: 0;
            }

            .category-header {
                font-size: 14px;
                font-family: PingFangSC-Medium, 'PingFang SC';
                font-weight: 500;
                color: #333;
                padding: 14px 24px;
                border-bottom: 1px solid #eaeaea;
            }

            .category-body {
                padding: 24px 24px 6px;

                .category-upload {
                    width: 80px;
                    height: 80px;
                    background: #fff;
                    border-radius: 4px;
                    border: 1px solid #eaeaea;
                    text-align: center;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }

                .icon {
                    width: 24px;
                    height: 24px;
                }

                .box-img {
                    width: 80px;
                    height: 80px;
                    border-radius: 4px;
                    position: relative;

                    .box-img-item {
                        width: 80px;
                        height: 80px;
                    }

                    .box-img-hover {
                        position: absolute;
                        width: 100%;
                        height: 100%;
                        top: 0;
                        left: 0;
                        background: rgb(51 48 45 / 50%);
                        border-radius: 4px;
                        opacity: 0;

                        .del-img {
                            position: absolute;
                            right: 10px;
                            bottom: 10px;
                            width: 20px;
                            height: 20px;
                            cursor: pointer;
                        }
                    }

                    .box-img-hover:hover {
                        opacity: 1;
                    }
                }
            }
        }
    }

    .poster-box {
        padding-top: 16px;
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .box-img {
        margin-right: 16px;
        margin-bottom: 16px;
        width: 160px;
        height: 160px;
        border-radius: 4px;
        position: relative;

        .box-img-item {
            width: 160px;
            height: 160px;
        }

        .box-img-hover {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background: rgb(51 48 45 / 50%);
            border-radius: 4px;
            opacity: 0;

            .del-img {
                position: absolute;
                right: 10px;
                bottom: 10px;
                width: 20px;
                height: 20px;
                cursor: pointer;
            }
        }

        .box-img-hover:hover {
            opacity: 1;
        }
    }

    .upload-box {
        width: 160px;
        height: 160px;
        border-radius: 3px;
        border: 1px dashed #c0ccda;
        background: #fbfdff;
        color: #ff6b00;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;

        .icon {
            margin-top: 30px;
            font-size: 22px;
            font-weight: 700;
        }

        .text {
            margin-top: 30px;
            color: #969696;
            line-height: 20px;
        }
    }
}
</style>
